<template>
  <div class="hotinfo">
    <div class="content1">
      <div class="box1">
        <div class="box">
          <div
            v-if="imagUrl"
            class="cimg1"
          ><img
              :src="imagUrl"
              alt=""
            ></div>
          <div class="cbox1">你知道这首歌居然被这么评论？</div>
        </div>
        <comment
          :id="$store.state.musicId"
          :type="'music'"
        ></comment>

      </div>
      <div
        class="box2"
        @click="nextSong"
      >
        <div class="abox1">
          <div
            :class="['cimg2',flag?'':'rotate']"
            style=""
          >
            <img
              :src="imagUrl"
              alt=""
            >
            <audio
              ref="player"
              id="audio"
              :src="music"
              autoplay="autoplay"
              @ended="nextSong"
            ></audio>
            <span v-show="
            flag"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="content2">
      <div class="box3">
        <div class="banner1">
          <p>{{Uname.name}} - <b>{{Uname.ar[0].name || ''}}</b></p>
          <div class="bfont">
            <ul
              class="bfont1"
              ref="ul"
            >
              <li
                id="list"
                v-for="(item,index) in lyric"
                :key="index"
              >{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="banner2">
          <div class="bbox1">
            <img
              src="//s3.music.126.net/mobile-new/img/musicStreet.png?22227b514ca899d2759a388ffbac109b"
              alt=""
            >
          </div>
        </div>
      </div>
      <div class="box4">
        <div class="btn">
          <button class="btn1">打开</button>
          <button class="btn2">下载</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHotInfo, getHotMusic, getHotLyric } from '@/api/hot'
import comment from '@/components/Comment/index.vue'
export default {
  data: () => ({
    flag: false,
    id: '',
    Uname: {},
    imagUrl: '',
    music: '',
    lyric: [],
    lyric1: [],
    lineNo: 0,
    ms: [],
    Cpos: 0,
    offset: -24,
  }),
  methods: {
    initData() {
      const music = this.$refs.player  // 音频所在对象
      // console.log('music', music)

      // const ulist = this.$refs.ul

      // console.log('music', music)

      let curTime


      music.addEventListener('timeupdate', () => {
        // console.log('parseFloat(this.lyric1[this.lineNo])', parseFloat(this.lyric1[this.lineNo]))
        // console.log('curTime', curTime)
        if (this.lineNo == this.lyric.length)
          return;
        curTime = music.currentTime; //播放器时间
        if (parseFloat(this.lyric1[this.lineNo]) <= curTime) {

          this.lineHigh();//高亮当前行
          this.lineNo++;
        }
      })

      music.addEventListener('ended', () => {
        this.goback(); //回滚歌词
        music.play()
      })
    },
    formatLyricTime(time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./
      if (!time) {
        return
      }
      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },
    // 高亮歌词滚动事件
    lineHigh() {
      const ulist = this.$refs.ul
      const list = ulist.getElementsByTagName("li");
      if (this.lineNo > 0) {
        list[this.lineNo - 1].removeAttribute("class");//去掉上一行的高亮样式
      }
      list[this.lineNo].className = "lineHigh";//高亮显示当前行

      // console.log('this.lineNo', this.lineNo)
      // console.log('this.Cpos', this.Cpos)

      //文字滚动
      if (this.lineNo > this.Cpos) {
        ulist.style.transform = "translateY(" + (this.lineNo - this.Cpos) * this.offset + "px)"; //整体向上滚动一行高度
      }
    },

    // 重新播放是歌词重置事件
    goback() {
      const ulist = this.$refs.ul
      document.querySelector(".lineHigh").removeAttribute("class");
      ulist.style.transform = "translateY(0)";
      this.lineNo = 0; //lineNo清零，重新播放
    },
    async getHotInfo() {
      // this.id = this.$route.query.id
      const res = await getHotInfo(this.$store.state.musicId)

      this.Uname = res.data.songs[0]
      // console.log(res);
      this.imagUrl = res.data.songs[0].al.picUrl
    },
    async getHotMusic() {
      const res = await getHotMusic(this.$store.state.musicId)
      this.music = res.data.data[0].url
      // console.log(this.music);
    },
    async getHotLyric() {
      const res = await getHotLyric(this.$store.state.musicId)
      var str = res.data.lrc.lyric
      str = str.split('[')
      var arr = []
      str.forEach((item) => {
        arr.push(item.split(']')[1])
      })
      arr.splice(0, 1)
      this.lyric = arr
      // console.log('lyric', this.lyric);

      var str1 = res.data.lrc.lyric
      // console.log(str1);
      str1 = str1.split("\n")
      let lyricTimeList = []
      str1.forEach((item) => {
        lyricTimeList.push(item.substring(item.indexOf("[") + 1, item.indexOf("]")))
      })
      lyricTimeList.forEach((item) => {
        const lyricValue = this.formatLyricTime(item)
        // console.log("lyricValue", lyricValue)
        this.lyric1.push(lyricValue)
        // console.log('this.lyric1', this.lyric1);
      })
    },
    nextSong() {
      var audio = document.querySelector('#audio');
      this.flag = !this.flag
      if (this.flag) {
        audio.pause();
      } else {
        audio.play();
      }
    }
  },
  components: {
    comment
  },
  async created() {
    await this.getHotInfo()
    await this.getHotMusic()
    await this.getHotLyric()
    this.initData()
  }
}
</script>
<style lang="less" scoped>
@keyframes infiniteRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: infiniteRotate 10s infinite linear;
}

.hotinfo {
  height: ceil(100vh);
  opacity: 1;
  transform-origin: center center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #000);

  .content1 {
    height: ceil(50vh);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgb(34, 31, 31));
    .box1 {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      border-bottom: 1px solid #999;
      .box {
        display: flex;
      }
      .cimg1 {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .cbox1 {
        font-size: 13px;
        line-height: 2;
        color: #fff;
      }
      .hbox1 {
        padding: 4px 12px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 9999px;
        box-sizing: border-box;
        width: 89px;
        height: 30px;
        line-height: 19px;
        span {
          font-size: 16px;
        }
      }
    }
    .box2 {
      padding-top: 30px;
      .abox1 {
        width: 247px;
        height: 247px;
        background: #000;
        margin: 0 auto;
        border: 10px solid #666;
        border-radius: 50%;
        position: relative;
        box-sizing: border-box;
        .cimg2 {
          position: absolute;
          width: 150px;
          height: 150px;
          left: 17%;
          top: 17%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: 1;
          }
          span {
            width: 56px;
            height: 56px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background: url()
              0 0 no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
  .content2 {
    .box3 {
      position: relative;
      .banner1 {
        padding: 0 35px;
        margin-top: 25px;
        position: relative;
        z-index: 20;
        p {
          text-align: center;
          font-size: 18px;
          line-height: 1.1;
          color: #fefefe;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          b {
            font-size: 16px;
            color: hsla(0, 0%, 100%, 0.6);
          }
        }
        .bfont {
          position: relative;
          margin-top: 14px;
          text-align: center;
          overflow: hidden;
          height: 50px;
          .bfont1 {
            height: 30px;
            li {
              font-size: 16px;
              color: #fff;
            }
            #list {
              height: 24px;
            }
            .lineHigh {
              color: #ffd700;
            }
          }
        }
      }
      .banner2 {
        margin-top: 15px;
        .bbox1 {
          width: 100px;
          height: 25px;
          border-radius: 26px;
          border: 1px solid hsla(0, 0%, 100%, 0.13);
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .box4 {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 80px;
      z-index: 100;
      .btn {
        display: flex;
        .btn1 {
          display: block;
          width: 100%;
          height: 40px;
          line-height: 40px;
          border: 1px solid rgb(255, 58, 58);
          border-radius: 40px;
          font-size: 18px;
          text-align: center;
          background: transparent;
          color: rgb(255, 58, 58);
          width: 170px;
          height: 38px;
          margin-left: 70px;
        }
        .btn2 {
          width: 170px;
          height: 38px;
          margin-left: 15px;
          display: inline-block;
          height: 40px;
          line-height: 40px;
          padding: 0 6px;
          border: 1px solid #adadad;
          border-radius: 40px;
          font-size: 18px;
          border-color: #ff3a3a;
          text-align: center;
          background: red;
          box-sizing: border-box;
          color: #fff;
        }
      }
    }
  }
}
#audio {
  display: none;
}
</style>